<template>
	<uni-popup ref="popup" type="bottom" @change="change" @maskClick="close" :safe-area="false">
		<div class="main-container">
			<div class="title">
				<div>阅读协议</div>
				<uni-icons @click="close" class="title-close" type="closeempty" size="24" color="#999999" style="display: flex;"></uni-icons>
			</div>
			<scroll-view scroll-x class="clause">
				<div :class="['clause-item', ci === current ? 'clause-activate' : '']" v-for="(citem, ci) in clauseList" :key="ci" @click="tapClause(ci)">{{ citem.title }}</div>
			</scroll-view>
			<div v-if="showTips" class="tips-msg">
				<div class="tips-msg-left">
					<div style="width: 28rpx;height: 28rpx;"><image style="width: 28rpx;height: 28rpx;" src="../static/notioc-20240131.png" mode=""></image></div>
					<div class="tips-msg-left-text">请滑动至底部，完整阅读条款内容</div>
				</div>
				<div @click="showTips = false"><uni-icons type="closeempty" size="20" color="#FFAA00"></uni-icons></div>
			</div>
			<scroll-view scroll-y="true" :scroll-top="scrollTop" class="scroll-main" @scrolltolower="scrolltolower" @touchmove.stop.prevent="() => {}">
				<div class="scroll-item">
					<div class="scroll-item-title">{{ clauseList[current].title }}</div>
					<div class="scroll-item-content"><rich-text :nodes="clauseList[current].richNode"></rich-text></div>
				</div>
			</scroll-view>
			<div :class="['action-btn', clauseList[current].isRead ? 'activate-btn' : '']">
				<div @click="readComplete">我已阅读并同意（{{ readTotal || 0 }}/{{ clauseList.length || 0 }}）</div>
			</div>
		</div>
		<!-- <div class="safe-area"></div> -->
	</uni-popup>
</template>

<script>
import { base64ToPath } from 'image-tools';
import { getStaticFile } from '@/api/common.js';
import { getClauseDocument } from '@/api/ins.js';
export default {
	name: 'agreementPupop',
	props: {
		open: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default: null
		}
	},
	created() {},
	mounted() {
		if (this.data && this.data.enquiryId) {
			// console.log('条款获取');
			Promise.all([getStaticFile('customer-notice.txt'), getClauseDocument({ enquireId: this.data.enquiryId })]).then(res => {
				this.clauseList[0].richNode = res[0] || '暂无数据！';
				if (!res[0]) {
					this.clauseList[0].isRead = true;
				}
				this.clauseList[1].richNode = res[1].data.insuranceTerms || '暂无数据！';
				if (!res[1].data.insuranceTerms) {
					this.clauseList[1].isRead = true;
				}
				this.canOpen = true;
			});
		}
	},
	data() {
		return {
			scrollTop: 1,
			showTips: true,
			old: {
				scrollTop: 1
			},
			current: 0,
			canOpen: false,
			clauseList: [
				{
					title: '客户告知书',
					isRead: false,
					richNode: ''
				},
				{
					title: '保险条款',
					isRead: false,
					richNode: ''
				}
			]
		};
	},
	watch: {
		open: {
			handler(n) {
				if (n) {
					if (this.canOpen) {
						this.$refs.popup.open();
					} else {
						this.$emit('update:open', false);
						uni.showToast({
							title: '无法获取条款！',
							icon: 'error'
						});
					}
				}
			}
		}
	},
	computed: {
		readTotal() {
			let total = 0;
			this.clauseList.forEach(item => {
				item.isRead && total++;
			});
			return total;
		},
		readAll() {
			return this.readTotal === this.clauseList.length && this.readTotal !== 0;
		}
	},
	methods: {
		change(e) {
			if (!e.show) {
				this.$emit('update:open', e.show);
			}
		},
		close() {
			this.$refs.popup.close();
		},
		tapClause(i) {
			this.current = i;
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
		},
		scrolltolower() {
			this.clauseList[this.current].isRead = true;
		},
		readComplete() {
			if (this.readAll) {
				this.$emit('complete', this.readAll);
				this.current = 0;
				this.close();
			} else if (this.clauseList[this.current].isRead) {
				this.current++;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.safe-area {
	width: 100%;
	height: env(safe-area-inset-bottom);
	background-color: #ffffff;
}
.tips-msg {
	width: 100%;
	padding: 30rpx 20rpx;
	background: #fff5e7;
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #ffaa00;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	&-left {
		display: flex;
		align-items: center;
		&-text {
			margin-left: 10rpx;
			display: flex;
			align-items: center;
		}
	}
}
.main-container {
	width: 750rpx;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	.title {
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		display: flex;
		justify-content: center;
		padding: 32rpx 0;
		box-sizing: content-box;
		border-bottom: 2rpx solid #f6f8f9;
		position: relative;
		&-close {
			position: absolute;
			top: 28rpx;
			right: 30rpx;
		}
	}
	.clause {
		padding: 34rpx 0 0rpx 0rpx;
		//display: flex;
		// width: 750rpx;
		//height: 44rpx;
		// overflow-x: scroll;
		white-space: nowrap;
		&-item {
			font-size: 32rpx;
			font-weight: 600;
			color: #999999;
			margin-left: 48rpx;
			margin-bottom: 16rpx;
			//width: fit-content;
			display: inline-block;
			// display: flex;
			// justify-content: center;
		}
		&-activate {
			color: #333333;
			position: relative;
		}
		&-activate::after {
			content: '';
			display: block;
			width: 48rpx;
			height: 8rpx;
			background: #fca118;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			position: absolute;
			bottom: -15rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.action-btn {
		padding: 20rpx 40rpx;
		> div {
			width: 670rpx;
			height: 88rpx;
			background: #cccccc;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.activate-btn {
		> div {
			background: #fca118;
		}
	}
	.scroll-main {
		width: 100%;
		height: 900rpx;
		background-color: #f6f8f9;
		padding: 30rpx;
		box-sizing: border-box;
		.scroll-item {
			border-radius: 20rpx;
			background: #ffffff;
			margin-bottom: 20rpx;
			&-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				padding: 30rpx 20rpx;
				border-bottom: 2rpx solid #f6f8f9;
			}
			&-content {
				min-height: 440rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}
}
</style>
